//___________________________________________________________________
// 1.登录方式按钮交互逻辑
// 获取部分元素并存储为全局变量,方便引用
//按钮div
const qqBtn = document.querySelector('.qq-btn');
const wechatBtn = document.querySelector('.wechat-btn');
//表单
const qqForm = document.querySelector('.qq-form');
const wechatForm = document.querySelector('.wechat-form');
const qqcodeFrom = document.querySelector('.qqcode-form');
// 字体
const qqfont = document.querySelector('.qq-font');
const wechatfont = document.querySelector('.wechat-font');
// 图标
const qqicon = document.querySelector('.qq-icon');
const wechaticon = document.querySelector('.wechat-icon');
// 返回按钮
const returnbtn = document.querySelector('.return');
const options = document.querySelector('.options');
const erweimabtn = document.querySelector('.erweima');
// 切换按钮/登录表单的函数
function chooseLoginMethod(type) {
  if (type === 'qq') {
    // 点击后改变并保持蓝色
    qqBtn.classList.add('active');
    wechatBtn.classList.remove('active');
    qqfont.classList.add('active');
    wechatfont.classList.remove('active');
    qqicon.classList.add('active');
    wechaticon.classList.remove('active');
    //点击后切换qq表单
    qqForm.classList.add('active');
    wechatForm.classList.remove('active');
    qqcodeFrom.classList.remove('active');
    //使下方底部选项全部显示
    options.classList.remove('hidden');
    // qq二维码登录按钮显示
    erweimabtn.classList.remove('hidden');
  } else if (type === 'wechat') {
    //点击后改变并保持绿色
    wechatBtn.classList.add('active');
    qqBtn.classList.remove('active');
    wechatfont.classList.add('active');
    qqfont.classList.remove('active');
    wechaticon.classList.add('active');
    qqicon.classList.remove('active');
    //点击后切换微信表单
    wechatForm.classList.add('active');
    qqForm.classList.remove('active');
    qqcodeFrom.classList.remove('active');
    //使下方底部选项全部隐藏
    options.classList.add('hidden');
    //qq二维码登录按钮隐藏
    erweimabtn.classList.add('hidden');
  } else if (type === 'erweima') {
    qqcodeFrom.classList.add('active');
    //使下方底部选项全部隐藏
    options.classList.add('hidden');
    // qq二维码登录按钮隐藏
    erweimabtn.classList.add('hidden');
    // QQ登录和微信登录按钮组隐藏
    document.querySelector('.login-btn-container').classList.add('hidden');
    // QQ登录和微信登录按表单组隐藏
    document.querySelector('.login-form').classList.add('hidden');
    // 返回按钮显示
    returnbtn.style.display = 'block';
  }
}
//给返回按钮添加实际功能
function goback() {
  // 点击后按钮隐藏
  returnbtn.style.display = 'none';
  // 原来其他元素显示
  document.querySelector('.options').classList.remove('hidden');
  document.querySelector('.erweima').classList.remove('hidden');
  document.querySelector('.login-btn-container').classList.remove('hidden');
  document.querySelector('.login-form').classList.remove('hidden');
  qqcodeFrom.classList.remove('active');

}

// 鼠标移入按钮整体增色
function onMouseOverBtn(type) {
  if (type === 'qq') {
    qqBtn.classList.add('active1');
    qqfont.classList.add('active1');
    qqicon.classList.add('active1');
  } else if (type === 'wechat') {
    wechatBtn.classList.add('active1');
    wechatfont.classList.add('active1');
    wechaticon.classList.add('active1');
  }
}

// 鼠标移出按钮整体无色
function onMouseOutbtn(type) {
  if (type === 'qq') {
    qqBtn.classList.remove('active1');
    qqfont.classList.remove('active1');
    qqicon.classList.remove('active1');
  } else if (type === 'wechat') {
    wechatBtn.classList.remove('active1');
    wechatfont.classList.remove('active1');
    wechaticon.classList.remove('active1');
  }
}
//___________________________________________________________________
// 2.用户名输入下拉框交互逻辑

// 获取按钮和下拉选择框
const dropdownToggle = document.querySelector('.dropdown-toggle');
const dropdownContent = document.querySelector('.dropdown-content');
const iconDown = document.querySelector('.icon-down');
const iconUp = document.querySelector('.icon-up');

// 点击切换按钮时的事件处理程序
dropdownToggle.addEventListener('click', function (event) {

  // 判断下拉菜单当前是否可见
  // 如果不可见，则显示
  if (dropdownContent.style.display !== 'block') {
    dropdownContent.style.display = 'block';
    iconDown.style.display = 'none';
    iconUp.style.display = 'inline-block';
    // 如果已经可见，则隐藏
  } else {
    dropdownContent.style.display = 'none';
    iconDown.style.display = 'inline-block';
    iconUp.style.display = 'none';
  }
});

// 点击文档的任何地方都会触发这个事件监听器
document.addEventListener('click', function (event) {
  // 如果点击事件不是在下拉内容或切换按钮上发生的
  if (!dropdownContent.contains(event.target) && !dropdownToggle.contains(event.target)) {
    // 隐藏下拉内容
    dropdownContent.style.display = 'none';
    iconDown.style.display = 'inline-block';
    iconUp.style.display = 'none';
  }
});
// -------------------------------------------------------------------
// 获取所有的下拉项
const dropdownItems = document.querySelectorAll('.dropdown-item');

// 当下拉菜单显示时，设置默认项
dropdownToggle.addEventListener('click', function () {
  if (dropdownContent.style.display === 'block') {
    removeActiveClass();
    // 使第一个 item 默认激活
    dropdownItems[0].classList.add('active');
  }
});

// 定义一个函数来移除所有项的 'active' 类
function removeActiveClass() {
  dropdownItems.forEach(item => {
    item.classList.remove('active');
  });
}
// 为每一个下拉项添加鼠标悬停的事件监听器
dropdownItems.forEach(item => {
  // 当鼠标进入时
  item.addEventListener('mouseenter', function () {
    //移除所有项'active' 类
    removeActiveClass();
    //为当前项添加 'active' 类
    item.classList.add('active');
  });
  // 当鼠标离开下拉菜单时
  item.addEventListener('mouseleave', function () {
    // 移除所有项'active' 类
    removeActiveClass();
  });
});

// -------------------------------------------------------------------
var passwordfield = document.querySelector('.password-field');
// 使下拉框的数据点击后可填入框内
dropdownItems.forEach(item => {
  item.addEventListener('click', function () {
    // 获取点击项的文本内容
    const content = this.textContent;
    // 设置输入框的值为点击项的文本内容
    document.querySelector('.input-field').value = content;
    // 在选择后关闭下拉框
    document.querySelector('.dropdown-content').style.display = 'none';
    //使向下的箭头图标再次可见。
    iconDown.style.display = 'inline-block';
    //使向上的箭头图标不可见。
    iconUp.style.display = 'none';
    passwordfield.focus();// 把焦点移动到密码输入框上
  });
});

//___________________________________________________________________
// 3.提交按钮交互逻辑

//此段代码实现触碰提交按时css的转换
const submitbtn = document.querySelector('.submit-btn');
const submitjiantou = document.querySelector('.submit-jiantou');
// 鼠标移入改变提交按钮样式
function onMouseOverSub(type) {
  if (type === 'over') {
    // 鼠标移入后改变颜色
    submitbtn.classList.add('active');
    submitjiantou.classList.add('active');
  }
}
// 鼠标移出变回提交按钮原来样式
function onMouseOutSub(type) {
  if (type === 'out') {
    // 鼠标移入后改变颜色
    submitbtn.classList.remove('active');
    submitjiantou.classList.remove('active');
  }
}
// -------------------------------------------------------------------

//用于提交按钮的函数, 不同情况不同效果
document.querySelector('.submit-btn').addEventListener('click', function (event) {
  // 阻止表单的默认提交行为
  event.preventDefault();
  // 用户名/密码框里的值
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  // 用户名/密码没输入的错误提示
  var errorMessage1 = document.querySelector('.error-message1');
  var errorMessage2 = document.querySelector('.error-message2');
  // 输入框里的文字提示
  var inputfield = document.querySelector('.input-field');
  var passwordfield = document.querySelector('.password-field');
  // 登录成功的提示
  var toast = document.getElementById("toast");

  // 如果用户名和密码都为空
  if (username.trim() === '' && password.trim() === '') {
    errorMessage1.style.display = 'block'; // 显示错误消息
    inputfield.focus(); // 把焦点放到用户名输入框
    // 如果只有用户名为空
  } else if (username.trim() === '') {
    errorMessage1.style.display = 'block'; // 显示错误消息
    inputfield.focus();// 把焦点放到用户名输入框
    // 如果只有密码为空
  } else if (password.trim() === '') {
    errorMessage1.style.display = 'none'; //使用户名错误信息隐藏
    errorMessage2.style.display = 'block'; // 显示错误消息
    passwordfield.focus();// 把焦点放到密码输入框上
    // 所有数据都已填写，这里可以放置提交表单的代码
  } else {
    // 确保两条错误消息被隐藏
    errorMessage1.style.display = 'none';
    errorMessage2.style.display = 'none';
    // 弹出登录成功提示框
    toast.style.display = "block";
    // 1.5秒后刷新页面
    setTimeout(function () {
      location.reload();
    }, 1500);
  }
});

// 用于隐藏错误消息的函数, 如果点击发生在按钮之外，则隐藏错误消息
function hideErrorMessages() {
  var errorMessage1 = document.querySelector('.error-message1');
  var errorMessage2 = document.querySelector('.error-message2');
  errorMessage1.style.display = 'none';
  errorMessage2.style.display = 'none';
}
// 当点击发生在文档的任何地方时触发
document.addEventListener('click', function (event) {
  // 获取目标元素
  var targetElement = event.target;
  // 获取我们的表单和按钮
  var submitButton = document.querySelector('.submit-btn');
  // 检查点击是否发生在提交按钮上,如果在
  if (submitButton.contains(targetElement)) {
    // 阻止默认事件
    event.preventDefault();
    //如果不在
  } else if (!submitButton.contains(targetElement)) {
    //触发隐藏函数
    hideErrorMessages();
  }
});

//___________________________________________________________________
// 4.底部选项交互逻辑

// 检查"记住密码"复选框的函数
function checkRememberPassword() {
  const autoLoginCheckbox = document.getElementById('autoLogin');
  const rememberPasswordCheckbox = document.getElementById('rememberPassword');
  // 如果自动登录为勾选状态
  if (autoLoginCheckbox.checked) {
    // 则记住密码也是
    rememberPasswordCheckbox.checked = true;
  }
}

//___________________________________________________________________
// 5.关闭按钮交互逻辑
// 点击触发
document.querySelector(".iconfont.icon-quxiao.exit").addEventListener("click", function () {
  var container = document.querySelector(".container");
  // 调用动画
  container.style.animation = "fadeOutBottomUp 0.6s forwards";
});